<template>
  <view class="m-3 p-3 rounded bg-blue-100">
    <view class="flex justify-between">
      <view>{{ MyDayjs(targetMonthStartDay).format('YYYY年MM月') }}</view>
      <view>
        <CommonButton size="small" :plain="true" type="warning" text="上个月" @click="handleForward"></CommonButton>
        <CommonButton size="small" :plain="true" type="success" text="今日" @click="handleToday"></CommonButton>
        <CommonButton size="small" :plain="true" type="primary" text="下个月" @click="handleBackward"></CommonButton>
      </view>
    </view>
    <view class="grid grid-cols-7 text-center">
      <view class="col-span-1" v-for="(item, index) in weekList" :key="index">{{ item }}</view>
      <view v-for="(item) in MyDayjs(targetMonthStartDay).day()" :key="item"></view>
      <view v-for="(item,index) in targetMonthDayList" :key="index" class="h-14 w-10 flex justify-center items-center">
        <view
            @click="handleQuery(item)"
            :class="selectedDay === item.date ? 'bg-blue-300 text-white' : ''"
            class="cursor-pointer text-xl rounded w-10 h-12 inline-flex justify-center items-center relative hover:bg-blue-200 hover:text-white transition-all">
          {{ index + 1 }}
          <view v-if="isBeforeToday(item.date)&&item.desc" class="absolute bottom-0 text-xs"
                :style="`color:${item.color}`">
            已{{ item.desc }}
          </view>
          <view v-else-if="item.desc" class="absolute bottom-0 text-xs"
                :style="`color:${item.desc==='今日'?'blue':'green'}`">
            {{ item.desc==='今日'?item.desc:'未'+item.desc }}
          </view>
          <view class="absolute top-0 right-0">
            <u-badge v-if="isBeforeToday(item.date)" :value="item.total"></u-badge>
            <u-badge v-else :value="item.total" color="white" bg-color="green"></u-badge>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import MyDayjs from "@/utils/common/myDayjs";
import CommonButton from "@/components/button/CommonButton.vue";

const props = defineProps({
  markObject: {
    type: Object,
    default: () => {
      return {
        color: 'red',
        days: ['2023-12-02', '2023-12-15', '2023-12-15', '2023-12-20'],
        desc: '过期  '
      }
    }
  },
  date: {
    type: String,
    default: MyDayjs().format('YYYY-MM-DD')
  }
})
const emits = defineEmits(['update:date', 'change', 'select'])

const targetDay = computed({
  get: () => props.date,
  set: (val) => emits('update:date', val)
})

const currentDay = ref(MyDayjs().format('YYYY-MM-DD'))
const selectedDay = ref(MyDayjs().format('YYYY-MM-DD'))
const targetMonthStartDay = computed(() => {
  return MyDayjs(targetDay.value).startOf('month').format('YYYY-MM-DD')
})
const targetMonthDays = computed(() => {
  return MyDayjs(targetDay.value).daysInMonth()
})
const targetMonthDayList = computed(() => {
  let list: any = []
  for (let i = 0; i < targetMonthDays.value; i++) {
    list.push({
      date: MyDayjs(targetMonthStartDay.value).add(i, 'day').format('YYYY-MM-DD'),
      desc: '',
      color: '',
      total: 0
    })
  }
  const index = list.findIndex((item: any) => {
    return MyDayjs(currentDay.value).diff(item.date) === 0
  })
  if (index !== -1) {
    list[index].desc = '今日'
    list[index].color = '#409EFF'
  }
  props.markObject.days.forEach((day: any) => {
    const index = list.findIndex((item: any) => {
      return item.date === day
    })
    if (index !== -1) {
      list[index].desc = props.markObject.desc
      list[index].color = props.markObject.color
      list[index].total++
    }
  })
  return list
})

const weekList = ref(['日', '一', '二', '三', '四', '五', '六'])
const handleForward = () => {
  targetDay.value = MyDayjs(targetDay.value).subtract(1, 'month').format('YYYY-MM-DD')
  emits('change', targetDay.value)
}
const handleBackward = () => {
  targetDay.value = MyDayjs(targetDay.value).add(1, 'month').format('YYYY-MM-DD')
  emits('change', targetDay.value)
}
const handleToday = () => {
  targetDay.value = MyDayjs().format('YYYY-MM-DD')
  selectedDay.value = MyDayjs().format('YYYY-MM-DD')
  emits('change', targetDay.value)
}
const handleQuery = (e: any) => {
  selectedDay.value = e.date
  emits('select', e.date, e.total)
}

const isBeforeToday = (date: string) => {
  return MyDayjs(date).diff(MyDayjs(), 'days') < 0
}
const isToday = (date: string) => {
  return MyDayjs(date).diff(MyDayjs(), 'days') === 0
}


</script>

<style scoped>

</style>